<template>
	<div>
		<el-drawer
			v-model="state.isShowDialog"
			:size="`calc(100% - 220px)`"
			:show-close="false"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
		>
			<template #header>
				<div class="flex-c-b">
					<div class="flex-c-c">
						<span class="mr15">模型：{{ state.editItem.modelName }}</span>
						<span class="mr15">模型创建时间：{{ state.editItem.createTime }}</span>

						<el-switch v-model="state.editItem.status" :active-value="10" :inactive-value="0" active-text="开" inactive-text="关"> </el-switch>
					</div>
					<div>
						<el-button type="primary" @click="onSubmit" size="default"> 构建模型 </el-button>
						<el-button @click="closeDialog" size="default"> 返 回 </el-button>
					</div>
				</div>
			</template>
			<el-tabs v-model="state.activeTab" @tab-click="handleClick">
				<el-tab-pane :name="item.id" v-for="item in state.tabList" :key="item.id">
					<template #label>
						<span class="flex-c-c tab-title">
							<SvgIcon class="mr5" :name="item.icon" />
							{{ item.name }}
						</span>
					</template>
					<fieldListtem :modelId="state.editItem.id" v-if="item.id == 0" />
					<preprocessingTem :modelId="state.editItem.id" v-if="item.id == 1" />
					<abstractTem :modelId="state.editItem.id" v-if="item.id == 3" />
					<strategyTem :modelId="state.editItem.id" v-if="item.id == 5" />
					<applicationTem :modelId="state.editItem.id" v-if="item.id == 6" />
				</el-tab-pane>
			</el-tabs>
		</el-drawer>
	</div>
</template>
  
<script setup lang="ts" name="systemDicDialog">
import { reactive, ref, onMounted, defineAsyncComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
// 引入组件
const fieldListtem = defineAsyncComponent(() => import('./fieldList.vue'));
const abstractTem = defineAsyncComponent(() => import('./abstractTem.vue'));
const preprocessingTem = defineAsyncComponent(() => import('./preprocessing.vue'));
const strategyTem = defineAsyncComponent(() => import('./strategy.vue'));
const applicationTem = defineAsyncComponent(() => import('./application.vue'));
import { ConstructModel } from '/@/api/model/index';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const state = reactive({
	editItem: {} as any,
	isShowDialog: false,
	activeTab: 99,
	tabList: [
		{
			name: '字段管理',
			icon: 'iconfont icon-biaodan',
			id: 0,
		},
		{
			name: '预处理管理',
			icon: 'iconfont icon-jiliandongxuanzeqi',
			id: 1,
		},
		{
			name: '黑/白名单管理',
			icon: 'iconfont icon-ico',
			id: 2,
		},
		{
			name: '抽象处理',
			icon: 'iconfont icon-neiqianshujuchucun',
			id: 3,
		},
		{
			name: '机器学习配置',
			icon: 'iconfont icon-quanjushezhi_o',
			id: 4,
		},
		{
			name: '策略管理',
			icon: 'iconfont icon-shenqingkaiban',
			id: 5,
		},
		{
			name: '模型应用',
			icon: 'iconfont icon-shenqingkaiban',
			id: 6,
		},
	],
});

// 打开弹窗
const openDialog = (v: any) => {
	state.editItem = v;
	state.activeTab = 6;
	console.log(state.editItem);

	state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
const handleClick = (tab: any) => {
	console.log(tab);
};

const onSubmit = async () => {
	ElMessageBox.confirm(`确认重新构建模型将清空历史数据！`, '是否重新构建模型？', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		await ConstructModel({
			id: state.editItem.id,
		});
		ElMessage.success('构建成功');
	});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style scoped lang="scss">
:deep(.el-tabs__nav-scroll) {
	padding: 0 30px;
}
.tab-title {
	line-height: 0;
}

.el-tabs {
	height: 100%;
}
:deep(.el-tabs__content) {
	height: calc(100% - 60px) !important;
}
</style>

